<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-select v-model="form.type" size="small" placeholder="请选择执行程序" style="width: 200px" filterable clearable>
                        <el-option v-for="(item, index) in list" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="form.type=='pullProcessing'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入加工单, 多个用逗号隔开" v-model.trim="form.processing_code" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-if="form.type=='downloadImg'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入款号, 多个用逗号隔开" v-model.trim="form.number" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='downloadMaterialImg'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入物料materiel_id, 多个用逗号隔开" v-model.trim="form.id" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='downloadAttach'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入款号, 多个用逗号隔开" v-model.trim="form.type_no" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='pullBnInvoice'">
                    <el-form-item>
                        <el-select size="small" v-model="form.bn_type" style="width: 100px;">
                            <el-option value="source_id" label="订单号"></el-option>
                            <el-option value="timeout" label="创建时间"></el-option>
                        </el-select>
                    </el-form-item>
                    <template v-if="form.bn_type=='timeout'">
                        <el-form-item>
                            <el-date-picker v-model="form.start" value-format="yyyy-MM-dd HH:mm:ss" size="small" type="datetime" placeholder="请输入开始时间" clearable></el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="form.end" value-format="yyyy-MM-dd HH:mm:ss" size="small" type="datetime" placeholder="请输入结束时间" clearable></el-date-picker>
                        </el-form-item>
                    </template>
                    <el-form-item v-if="form.bn_type=='source_id'">
                        <el-input size="small" style="width: 400px" placeholder="请输入订单号, 多个用逗号隔开" v-model.trim="form.sourceId" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='pullJyItem'">
                    <el-form-item>
                        <el-select size="small" v-model="form.s_type">
                            <el-option value="skuCodes" label="规格编码"></el-option>
                            <el-option value="productCodes" label="商品编码"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.s_type=='productCodes'">
                        <el-input size="small" style="width: 400px" placeholder="请输入商品编码, 多个用逗号隔开" v-model.trim="form.productCodes" clearable></el-input>
                    </el-form-item>
                    <el-form-item v-else>
                        <el-input size="small" style="width: 400px" placeholder="请输入规格编码, 多个用逗号隔开" v-model.trim="form.skuCodes" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='pullNewProducts'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入款号, 多个用逗号隔开" v-model.trim="form.type_no" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='pullPricingExamine'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入加工单号, 多个用逗号隔开" v-model.trim="form.processing_code" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='pullPricingOrder'">
                    <el-form-item>
                        <el-select size="small" v-model="form.p_type">
                            <el-option value="实付核价" label="实付核价"></el-option>
                            <el-option value="大货核价" label="大货核价"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入核价编码, 多个用逗号隔开" v-model.trim="form.number" clearable></el-input>
                    </el-form-item>
                </template>
                <template v-else-if="form.type=='updateAllocationStatus'">
                    <el-form-item>
                        <el-input size="small" style="width: 400px" placeholder="请输入调拨计划单号, 多个用逗号隔开" v-model.trim="form.allocation_number" clearable></el-input>
                    </el-form-item>
                </template>
                <el-form-item>
                    <el-button type="primary" class="el-icon-video-play" @click="executeBtn" size="small" :loading="btnLoading" :disabled="!form.type">&nbsp;启动程序</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col style="overflow-x: auto;padding: 8px;background-color: #000c17;width: 960px;color: white;" :style="{'height': tableHeight}" v-loading="loading">
            <div style="float: right">
                <el-tag v-if="loopStatus" type="success" size="small"><i class="el-icon-loading"></i>&nbsp;运行中</el-tag>
                <el-tag v-else type="danger" size="small"><i class="el-icon-video-pause"></i>&nbsp;已终止</el-tag>
            </div>
            <div v-html="data"></div>
        </el-col>
    </section>
</template>

<script>

import {autoExecute, autoLog} from "@/api/sys/auto";

export default {
    name: "sys_auto",
    data() {
        return {
            tableHeight: window.innerHeight - 180+"px",
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: "",
            user: {},
            nodeActions: [],

            form: {type: "", s_type: "productCodes", p_type: "实付核价", bn_type: "source_id"},
            list:[
                {value: "pullProcessing", label: "同步成品加工单"},
                {value: "downloadImg", label: "下载设计档案图片(数加)"},
                {value: "downloadMaterialImg", label: "下载物料档案图片(数加)"},
                {value: "downloadAttach", label: "下载设计档案附件(数加)"},
                {value: "pullBnInvoice", label: "同步发票数据(班牛)"},
                {value: "pullJyItem", label: "同步商品信息(巨益)"},
                {value: "pullNewProducts", label: "同步尺寸表"},
                {value: "pullPricingExamine", label: "同步加工单核价审核"},
                {value: "updateAllocationStatus", label: "更新调拨计划单的归还状态"},
            ],
            loop‌‌SetTimeout: null,
            loopStatus: 0,//0终止 1运行中
        }
    },
    watch:{
        // 监听路由参数的变化
        'form.type': {
            immediate: true,
            handler(val) {
                this.form = {type: val, s_type: "productCodes", p_type: "实付核价"};
            }
        },
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //获取数据
        executeBtn() {
            this.btnLoading = true;
            this.loading = true;
            this.stopLoop();
            autoExecute(this.form).then((res) => {
                this.btnLoading = false;
                if(res.code === 0){
                    this.$message.success(res.msg);
                    setTimeout(()=>{}, 2000);
                    this.loopLog();
                }else{
                    this.$message.error(res.msg);
                    this.stopLoop();
                }
            }).catch(() => {
                this.btnLoading = false;
                this.loading = false;
            });
        },
        loopLog(){
            let that = this;
            autoLog({type: this.form.type}).then((res) =>{
                this.data = res.data.data;
                this.loopStatus = res.data.status;
                this.loading = false;
                if(this.loopStatus){
                    this.loop‌‌SetTimeout = setTimeout(()=>{that.loopLog();}, 2000);
                }
            })
        },
        stopLoop(){
            this.data = "";
            clearTimeout(this.loop‌‌SetTimeout);
            this.loopStatus = 0;
            this.loading = false;
        },
    },
    destroyed() {
        this.stopLoop();
        console.log("离开")
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
